.timeTable {
  position: relative;
  background: var(--color-bg-2);
  max-height: 500px;
  overflow-y: scroll;

  .table {
    position: relative;
    display: flex;
  }

  .row {
    flex: 1;
    border-right: 1px solid var(--color-fill-2);
    position: relative;
    display: flex;
    flex-direction: column;

    &:first-child {
      .line {
        background: var(--color-fill-2);
      }
    }

    .th {
      text-align: center;
      color: rgb(var(--gray-10));
      border-bottom: 1px solid var(--color-fill-2);
      position: sticky;
      top: 0;
      background: var(--color-fill-2);
      z-index: 10;
      user-select: none;

      span {
        display: block;
        height: var(--workPeriod-row-size);
        line-height: var(--workPeriod-row-size);
      }
    }

    .line {
      color: rgb(var(--gray-10));
      height: var(--workPeriod-row-size);
      padding: 4px 8px;
      position: relative;
      box-sizing: border-box;
      background: var(--color-bg-2);
      text-align: center;
      cursor: pointer;

      &.selected {
        background-color: rgb(var(--warning-1));
      }

      &:hover {
        border: 1px solid rgb(var(--blue-4));
      }
    }

    .day {
      position: relative;
      flex: 1;

      .timeRange {
        position: absolute;
        width: 100%;
        background-color: rgb(var(--blue-2));
        left: 50%;
        transform: translate3d(-50%, 0, 0);
        z-index: 3;
      }
    }
  }
}

.button-group {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.search-form-wrapper {
  display: flex;
  border-bottom: 1px solid var(--color-border-1);
  margin-bottom: 20px;

  .right-button {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
    padding-left: 20px;
    margin-bottom: 20px;
    border-left: 1px solid var(--color-border-2);
    box-sizing: border-box;
  }
}
